<template>
  <div class="app-container">
    <el-form :inline="true" :model="order" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input v-model="order.ordersNumber" clearable placeholder="订单编号" />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="order.status" placeholder="选择订单状态" clearable>
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" /></el-select>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="order.nickName" clearable placeholder="用户名" />
      </el-form-item>
      <el-form-item label="分类列表">
        <el-select v-model="order.classifyId" placeholder="请选择分类列表" clearable>
          <el-option v-for="(item,index) in categoryList" :key="index" :label="item.classifyName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="order.value"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="订单开始时间"
          end-placeholder="订单结束时间"
          align="right"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-button
        plain
        size="mini"
        style="height: 35px;"
        @click="exportExcel"
      >导出表格
      </el-button>
    </el-form>
    <el-table
      id="out-table"
      class="el-table"
      border
      :data="orderList.list"
      style="width: 98%;"
    >
      <el-table-column
        align="center"
        type="index"
        width="50"
      />
      <el-table-column
        align="center"
        prop="ordersNumber"
        label="订单编号"
        width="270"
      />
      <el-table-column
        align="center"
        prop="nickName"
        label="用户名"
        width="180"
      />
      <el-table-column
        align="center"
        prop="phone"
        label="手机号"
        width="220"
      />
      <el-table-column
        align="center"
        prop="className"
        label="课程名称"
        width="200"
      />
      <el-table-column
        align="center"
        prop="createTime"
        label="下单时间"
        width="280"
      />
      <el-table-column
        align="center"
        prop="status"
        label="订单状态"
        width="180"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status===0&&scope.row.failStatus===0"
            type="success"
            disable-transitions
          >已支付
          </el-tag>
          <el-tag
            v-if="scope.row.status===0&&scope.row.failStatus===1"
            type="success"
            disable-transitions
          >退款中
          </el-tag>
          <el-tag
            v-if="scope.row.status===0&&scope.row.failStatus===2"
            type="success"
            disable-transitions
          >退款失败
          </el-tag>
          <el-tag
            v-if="scope.row.status===0&&scope.row.failStatus===3"
            type="success"
            disable-transitions
          >退款成功
          </el-tag>
          <el-tag
            v-if="scope.row.status===2"
            type="success"
            disable-transitions
          >取消订单
          </el-tag>
          <el-tag
            v-if="scope.row.status===1&&scope.row.failStatus===0"
            type="warning"
            disable-transitions
          >待支付
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            plain
            size="mini"
            @click="getOrderInfo(scope.row.ordersNumber)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看详情弹窗-->
    <el-dialog title="订单详情" width="40%" top="5vh" :visible.sync="dialogFormVisible">
      <el-form label-position="right" label-width="80px" :model="orderInfo">
        <el-form-item
          label="订单编号 "
        >
          <el-input
            v-model="orderInfo.ordersNumber"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="orderInfo.nickName" :disabled="true" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="orderInfo.phone" :disabled="true" />
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="orderInfo.className" :disabled="true" />
        </el-form-item>
        <el-form-item label="课程图片">
          <el-image
            style="width: 100px; height: 100px"
            :src="orderInfo.classImage"
          />
        </el-form-item>
        <el-form-item label="课程分类">
          <el-input v-model="orderInfo.classifyName" :disabled="true" />
        </el-form-item>
        <el-form-item label="课程价格">
          <el-input v-model="orderInfo.classPrice" :disabled="true" />
        </el-form-item>
        <el-form-item label="订单状态">
          <template>
            <el-tag
              v-if="orderInfo.status===0&&orderInfo.failStatus===0"
              type="success"
              disable-transitions
            >已支付
            </el-tag>
            <el-tag
              v-if="orderInfo.status===0&&orderInfo.failStatus===1"
              type="success"
              disable-transitions
            >退款中
            </el-tag>
            <el-tag
              v-if="orderInfo.status===0&&orderInfo.failStatus===2"
              type="success"
              disable-transitions
            >退款失败
            </el-tag>
            <el-tag
              v-if="orderInfo.status===0&&orderInfo.failStatus===3"
              type="success"
              disable-transitions
            >退款成功
            </el-tag>
            <el-tag
              v-if="orderInfo.status===2"
              type="success"
              disable-transitions
            >取消订单
            </el-tag>
            <el-tag
              v-if="orderInfo.status===1&&orderInfo.failStatus===0"
              type="warning"
              disable-transitions
            >待支付
            </el-tag>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页-->
    <el-pagination
      background
      :current-page="orderList.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="orderList.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import { getClassOrdersInfo, getClassOrders } from '@/api/order'
import { getCategory } from '@/api/category'
export default {
  name: 'OrderSchedule',
  data() {
    return {
      options: [{
        value: 0,
        label: '已支付'
      }, {
        value: 1,
        label: '代付款'
      }, {
        value: 2,
        failStatus: '1',
        label: '退款中'
      }, {
        value: 3,
        failStatus: '2',
        label: '退款失败'
      }, {
        value: 4,
        failStatus: '3',
        label: '退款成功'
      }],
      order: {
        classifyId: '',
        ordersNumber: '',
        status: '',
        value: [],
        nickName: '',
        phone: '',
        failStatus: ''
      },
      categorySearch: {
        classifyName: ''
      }, // 用于搜索条件
      categoryList: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      orderList: [],
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      orderInfo: {}
    }
  },
  created() {
    this.getOrderList()
    this.getCategory()
  },
  methods: {
    exportExcel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel') // 这里必须使用绝对路径，使用@/+存放export2Excel的路径
        const tHeader = ['订单编号', '用户名', '课程名称', '手机号', '订单状态'] // 导出的表头名信息
        const filterVal = ['ordersNumber', 'nickName', 'className', 'phone', 'status'] // 导出的表头字段名，需要导出表格字段名
        const list = that.orderList.list
        const data = that.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, 'sheet')// 导出的表格名称，根据需要自己命名
      })
    },
    // 格式转换
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getOrderList()

      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
      this.getOrderList()
    },
    handleNextClick() {
      this.pageNum++
      this.getOrderList()
    },
    handleSearch() {
      this.searchOrderList()
    },
    getOrderInfo(ordersNumber) {
      this.dialogFormVisible = true
      const parameter = {
        ordersNumber: ordersNumber
      }
      getClassOrdersInfo(parameter).then(res => {
        console.log(res)
        this.orderInfo = res.dataMap
      })
    },
    searchOrderList() {
      this.order.failStatus = ''
      if (this.order.status === '2') {
        this.order.failStatus = 1
        this.order.status = 0
      } else if (this.order.status === '3') {
        this.order.failStatus = 2
        this.order.status = 0
      } else if (this.order.status === '4') {
        this.order.failStatus = 3
        this.order.status = 0
      }
      this.pageNum = 1
      this.getOrderList()
    },
    getCategory() {
      getCategory(this.categorySearch, this.pageNum, this.pageSize).then(res => {
        this.categoryList = res.dataMap.list
      })
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // 获取订单列表
    getOrderList() {
      getClassOrders(this.order, this.pageNum, this.pageSize).then(res => {
        for (var i = 0; i < res.dataMap.list.length; i++) {
          res.dataMap.list[i].createTime = this.renderTime(res.dataMap.list[i].createTime)
        }
        console.log(res)
        this.orderList = res.dataMap
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.productImage{
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.el-select .el-input {
  width: 130px;
}
.el-dialog__body{
  padding:30px 40px;
}
.app-container{
  margin-top: 10px;
}
.el-pagination {
  float: right;
  margin: 10px 30px;
}
.el-table {
  margin: 10px 0px;
}
</style>
